<template>
	<view class="w-100">
		<view class="mt-9 flex-1 ml-3 row-ac" @click="toBack">
			<text class="iconfont icon-xiangzuo mr-2"></text>返回
		</view>
		<view class="flex-1 row">
			<view class="head-logo">
				<image :src="websiteInfo.Web_logo" mode=""></image>
			</view>
		</view>
		<view class="flex-1 row-a-j-fc mt-8">
			<view class="input-box row-ac">
				<view class="iconfont icon-mima"></view>
				<view class="ml-3 input-item border-bottom">
					<input type="text" placeholder="用户名/电话/邮箱" v-model="loginQueryInfo.username" value="" class="flex-1 py-3 px-2" />
				</view>
			</view>
			<view class="input-box row-ac mt-6">
				<view class="iconfont icon-yonghu"></view>
				<view class="ml-3 input-item border-bottom">
					<input type="password" placeholder="请输入密码" value="" v-model="loginQueryInfo.password" class="flex-1 py-3 px-2" />
				</view>
			</view>
			<view class="login-button row mt-6" @click="toLogin"
				:class="loginInput  == true ? 'login-button-bg2' : 'login-button-bg1'">登录</view>
		</view>
		<view class="flex-1 mt-6 row mx-3">
			<view class="row-ac">
				<view class="check-box mr-1 row text-white" :class="checkStatus == true ? 'bg-dark' : ''"
					@click="clickCheck">
					<view class="iconfont icon-gouxuan"></view>
				</view>
				<view class="font-s-3">阅读并同意<text class="font-w" @click="popupAgreement">《用户服务协议》</text>和<text
						class="font-w" @click="popupPolicy">《隐私政策》</text>
				</view>
			</view>
		</view>
		<view class="fixed-bottom" style="padding-bottom: 80rpx;">
			<view class="flex-1 row font-s-35 mt-3">
				<view class="" @click="navTo('/pages/public/forget')">找回密码</view>
				<view class="mx-2">|</view>
				<view class="" @click="navTo('/pages/public/register')">注册账号</view>
			</view>
		</view>
		<leson-popup ref="lesonDialog" :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
			<view class="flex-1 py-3">
				<view class="flex-1 mx-3 row-ac">
					<view></view>
					<view @click="cloesPopup">关闭</view>
				</view>
				<view class="flex-1 mx-3 py-2">
					<scroll-view scroll-y class="flex-1 agreement-box">
						<view class="flex-1" v-if="agreementStatus == true">
							<view class="flex-1 row font-s-45 font-w">用户服务协议</view>
							<view class="flex-1 mt-3"><rich-text :nodes="websiteInfo.user_agreement"></rich-text>
							</view>
						</view>
						<view class="flex-1" v-if="privacyStatus == true">
							<view class="flex-1 row font-s-45 font-w">隐私政策</view>
							<view class="flex-1 mt-3"><rich-text :nodes="websiteInfo.privacy_statement"></rich-text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</leson-popup>
	</view>
</template>
<script>
	import lesonPopup from "@/components/leson-popup"
	import {
		loginUrl,
		websiteDetailUrl
	} from '@/api/index.js';
	import request from "@/utils/request"
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				lesonpopup: false,
				agreementStatus: false,
				privacyStatus: false,
				loginQueryInfo: {
					username: '',
					password: ''
				},
				websiteInfo: '',
				userMarkId:'',
				checkStatus: false,
			}
		},
		computed: {
			loginInput() {
				if (this.loginQueryInfo.username !== '' && this.loginQueryInfo.password !== '') {
					return true
				} else {
					return false
				}
			}
		},
		onLoad() {
			this.getWebsiteDetail()
		},
		methods: {
			getWebsiteDetail(){
				this.$R.get(websiteDetailUrl).then(res=>{
					this.websiteInfo = res.data
					this.websiteInfo.user_agreement = formatRichText(res.data.user_agreement);
					this.websiteInfo.privacy_statement = formatRichText(res.data.privacy_statement);
				})
			},
			toLogin() {
				if (this.checkStatus == false){
					uni.showModal({
						title: '服务协议和隐私政策',
						content: '请您务必审慎阅读、充分理解《服务协议》和《隐私政策》各条款，我们需要收集您的收货信息，便于给您发货。您可阅读用户协议、隐私政策、免责切议了解详细信息。如您同意，请点击“同意"开始接受我们的服务。',
						cancelText: '不同意',
						confirmText: '同意',
						success: (res) => {
							if (res.confirm){
								this.checkStatus = true
								this.$R.post(loginUrl, this.loginQueryInfo).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
										let resUserInfo = res.data;
										uni.setStorage({
											key: 'userInfo',
											data: resUserInfo
										});
										uni.setStorage({
											key: 'token',
											data: resUserInfo.access
										});
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
									}
									if (res.msg == '登录成功') {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											});
										}, 1000);
									}
								})
							}else{
								uni.showToast({
									title: '取消登录',
									icon: 'none'
								});
							}
						}
					})
				}else{
					this.$R.post(loginUrl, this.loginQueryInfo).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							let resUserInfo = res.data;
							uni.setStorage({
								key: 'userInfo',
								data: resUserInfo
							});
							uni.setStorage({
								key: 'token',
								data: resUserInfo.access
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						if (res.msg == '登录成功') {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						}
					})
				}
				
			},
			whatlogin() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								uni.request({
									url: request.baseUrl + '/wechat-login/',
									method: 'POST',
									data: {
										js_code: loginRes.code,
										encrypted_data: infoRes.encryptedData,
										iv: infoRes.iv,
										username: loginRes.code,
									},
									success: function(res) {
										if (res.data.code == 200) {
											uni.showToast({
												title: res.msg,
												icon: 'none'
											});
											let resUserInfo = res.data;
											uni.setStorage({
												key: 'userInfo',
												data: resUserInfo.userInfo
											});
											uni.setStorage({
												key: 'token',
												data: resUserInfo.token.access
											});
											setTimeout(() => {
												uni.navigateBack({
													delta: 1
												});
											}, 1000);
										} else {
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											});
										}
										// 登陆成功后的操作
									}
								});
							}
						});
					}
				});
			},
			popupPolicy() {
				this.lesonpopup = true
				this.agreementStatus = false
				this.privacyStatus = true
			},
			popupAgreement(){
				this.lesonpopup = true
				this.agreementStatus = true
				this.privacyStatus = false
			},
			clickCheck() {
				this.checkStatus = !this.checkStatus
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			cloesPopup() {
				this.$refs.lesonDialog.close()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #fff;
	}
	.head-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-top: 220rpx;
		border: 1rpx solid #dee2e6;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}

	.input-box {
		.input-item{
			width: 388rpx;
		}
	}
	
	.login-button{
		width: 360rpx;
		height: 110rpx;
	}
	.login-button-bg1{
		background-color: #CECECE;
		color: #5C5C5C;
	}
	.login-button-bg2{
		background-color: #333;
		color: #fff;
	}
	
	.check-box {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 3rpx solid #333;
	
		.iconfont {
			font-size: 25rpx;
		}
	
	}
	
	.agreement-box {
		height: 1068rpx;
	}

</style>